import React, { Component } from 'react';
import ExpenseAdjunctItem from './expense-adjunct-item';
import 'styles/expense/expense-adjunct-list.scss';
import Annotate from 'components/template/annotate';
import ExpenseService from '../expense-service';
import Invoice from './invoice';
import { connect } from 'react-redux';

@connect(mapStateToProps)
class ExpenseAdjunctList extends Component {
  static contextTypes = {
    currentExpense: React.PropTypes.object,
    isWaitForAudit: React.PropTypes.bool
  };

  renderItem = () => {
    const { mergeAdjuncts = [], annotates, loginUser, receiptChanges ={}, receiptLabelsDesc={}, randomHash } = this.props;
    const { currentExpense, isWaitForAudit } = this.context;
    const let_map = [];
    mergeAdjuncts.forEach(item => {
      item.body.forEach(adjunct => {
        let_map.push(
          <Annotate
            key={adjunct.id || adjunct.billingNo}
            params={{
              typeName: 'INVOICE',
              entityID: currentExpense && currentExpense.id,
              target: { type: item.type === 'business' ? 'bankCard' : item.type, key: item.type === 'attachment' ? void 0 : adjunct.id }
            }}
            disabled={!isWaitForAudit}
            annotateList={ExpenseService.getAnnotateList(item.type === 'attachment' ? item.type : adjunct.id, annotates, loginUser)}
            onChange={this.props.refreshAnnotate}
          >
            <div className={`adjunct-list-item ${isWaitForAudit ? 'adjunct-detail-annotate' : ''}`}>
              {
                item.type === 'invoice'
                  ? (
                    <Invoice
                      receiptChanges={receiptChanges[adjunct.id]}
                      receiptLabelsDesc={receiptLabelsDesc[adjunct.id]}
                      handleShowMore={(isEditing) => this.props.handleJumpRead(adjunct, item.type, isEditing)}
                      currentAdjunct={adjunct}
                      isDetail={false}
                      className={'adjunct-item'}
                      flag={item.type}
                      randomHash={randomHash}
                      invoiceBase={[['billingTime', 'billingCode', 'billingNo', 'payee', 'title', 'goodsName']]}
                      onInvoiceChange={this.props.onInvoiceChange}
                    />)
                  : (
                    <ExpenseAdjunctItem
                      receiptChanges={receiptChanges[adjunct.id]}
                      receiptLabelsDesc={receiptLabelsDesc}
                      handleShowMore={(isEditing) => this.props.handleJumpRead(adjunct, item.type, isEditing)}
                      currentAdjunct={adjunct}
                      flag={item.type}
                    />
                  )
              }
            </div>
          </Annotate>
        );
      });
    });
    return let_map;
  };

  render() {
    return (
      <section className="adjunct-list">
        <div style={{ position: 'relative' }}>
          {
            this.renderItem()
          }
        </div>
      </section>
    );
  }
}

function mapStateToProps(state) {
  return {
    company: state.login.company,
    loginUser: state.login.loginUser
  };
}

ExpenseAdjunctList.propTypes = {};

export default ExpenseAdjunctList;
